<div>
  <div class="filter-setting">
    <div v-if="filterType !== 'null'" class="filter-input">
      <p>请输入过滤的条件：<input v-model="arg" type="text" /></p>
    </div>
    <div class="filter-setter">
      <div>
        <span>当前过滤方法：</span>
        <select v-model="filterType">
          <option
            v-for="filterOption in filterOptionList"
            v-bind:value="filterOption[0]"
          >
            {{ filterOption[1]["abbreviation"] }}
          </option>
        </select>
      </div>
      <input id="hiddenBad" v-model="hiddenBad" type="checkbox" />
      <label for="hiddenBad">只显示符合条件章节</label>
      <div class="filter-description" v-html="filterDescription"></div>
      <div v-if="false">
        <span class="good"></span>
        <span class="warning"></span>
        <span class="bad"></span>
      </div>
    </div>
  </div>
  <chapter-list />
</div>
